// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.

function initialize() {

  var markers = [];
  var mapOptions = {
  	panControl: false,
  	streetViewControl: false,
  	mapTypeControl: true,
    zoom: 8,
    center: new google.maps.LatLng(1.33560717159813,103.805639422404),
    mapTypeId: google.maps.MapTypeId.HYBRID
  };  

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(1.2135528453386628, 103.61215042734375),
      new google.maps.LatLng(1.4682283601961776, 104.09142899179687));
  map.fitBounds(defaultBounds);
  

  // Create the search box and link it to the UI element.
  var input = document.getElementById('target');
  var searchBox = new google.maps.places.SearchBox(input);

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {

      // Create a marker for each place.
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        draggable: true,
        clickable: false,
        animation: google.maps.Animation.DROP
      });

      google.maps.event.addListener(marker, 'dragend', 
      	function() { 
      		geocodePosition(marker.getPosition()); 
      	}
      );
      markers.push(marker);

      bounds.extend(place.geometry.location);

      break; // ignore the rest of the places.
    }

    map.fitBounds(bounds);
  });

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

// Reverse geocode. Get address from lat and long
function geocodePosition(pos) 
{
   	geocoder = new google.maps.Geocoder();
   	geocoder.geocode (   
   		{ latLng: pos }, 
        function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                // Update the search box with new address from the marker.
                $("#target").val(results[0].formatted_address);
                $("#latlong").val(pos);
                $("#mapErrorMsg").hide(100);
            } 
            else 
            {
                $("#mapErrorMsg").html('Cannot determine address at this location.' + status).show(100);
            }
        }
    );
}

google.maps.event.addDomListener(window, 'load', initialize);

